<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>图片列表</title>
    <link rel="stylesheet" href="./static/css/viewer.min.css">
    <script src="./js/viewer.min.js"></script>


    <style>
        body {
            margin: 0;
            padding: 0;
        }

        main {
            height: 100vh;
            overflow-y: auto;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-auto-rows: minmax(100px, auto);
            gap: 10px; /* 可选，设置行间距 */
        }

        .grid-item {
            width: 100%;
            outline: 1px dotted #ccc;
        }

        .grid-item img {
            width: 100%;
            height: auto; /* 保持图片的宽高比 */
        }

        /*适配移动端*/
        @media screen and (max-width: 768px) {
            .grid-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</head>
<body>
<main>
    <div class="grid-container" id="viewer">
    </div>
</main>
<script>
    let listData = [];
    let parent = "";
    const main = document.querySelector("main");
    const dom = document.querySelector(".grid-container");
    let viewerView = new Viewer(document.getElementById('viewer'), {
        inline: false
    });

    const loading = () => {
        listData.splice(0, 40).forEach(item => {
            let img = document.createElement("img");
            let gridItem = document.createElement("div");
            gridItem.className = "grid-item"
            img.src = item.link;
            img.loading = "lazy";
            gridItem.append(img);
            dom.append(gridItem);
        })
        viewerView.update();
    }

    window.addEventListener("message", (e) => {
        listData = JSON.parse(e.data)
        if (listData.length > 0) {
            loading()
        }
    })

    main.addEventListener("scroll", () => {
        const scrollHeight = main.scrollHeight;
        const clientHeight = main.clientHeight
        const scrollTop = main.scrollTop
        if (scrollHeight - clientHeight <= scrollTop) {
            console.log("触底加载")
            loading()
        }
    })
</script>
</body>
</html>